iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0
自我挑戰組

網頁設計自我挑戰 - 從零開始系列 第 1

我的第一行程式碼:Hello, World!

  • 分享至 

  • xImage
  •  

我是個對網頁設計充滿好奇,過去總是覺得這領域很高深,但今天,我決定踏出這一步,挑戰用30天的時間,從零開始打造一個屬於自己的作品集。

今天的任務很簡單,就是寫出我們人生中的第一行程式碼!網頁的基礎,是由 HTML (HyperText Markup Language) 組成的。它就像房子的骨架,所有內容都得靠它來支撐。

我們會需要一個文字編輯器,像是 VS Code,這是我們接下來 30 天的好夥伴。然後建立一個新的檔案,命名為 index.html。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>這是我的第一個網頁,我很興奮能開始這段旅程!</p>
  </body>
</html>

程式碼拆解:

<!DOCTYPE html>:告訴瀏覽器這是一個 HTML5 文件。

<html>:整個網頁的根元素。

<head>:網頁的設定區,像是標題 <title>,使用者在瀏覽器分頁上看到的文字就是它。

<body>:網頁的內容區,所有你想讓使用者看到的內容,例如文字、圖片、連結,都放在這裡。

<h1>:標題標籤,從 h1 到 h6,數字越小,標題越大。

<p>:段落標籤,用來放一般的文字段落。

保存檔案後,用瀏覽器打開它,你就會看到「Hello, World!」和一行文字。

執行成果:
https://ithelp.ithome.com.tw/upload/images/20250808/20171037yHLrxQHbTY.png


下一篇
網頁的靈魂標籤:文字、標題與段落
系列文
網頁設計自我挑戰 - 從零開始26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言